<template>
  <view :class="getPageClasses">
    <view class="nav y-bold y-color-title" :class="getNavClasses" :style="{ paddingTop: navPos.top, lineHeight: navPos.height }">
      <slot name="nav">
        <view class="home" v-if="isBackHome && !_showReturn" @click="backHome">
          <text class="iconfont iconindex"></text>
        </view>
        <view class="y-expand-scope" :class="{ return: true, hidden: !_showReturn }" @click="navBack" >
          <image :src="getReturnImgSrc" class="return" :style="whiteReturnImgClasses"/>
        </view>
        <view class="nav-title" :class="[isChooseCity?'isChooseCity':'',isBackHome?'isBackHome':'']">{{ title }}</view>
        <view :class="{ toFixed: true, hidden: !_showReturn }" />
      </slot>
    </view>
    <slot></slot>
  </view>
</template>

<script>
const tabBarPages = { 'pages/common/home/home': true, 'pages/common/order/ordert': true, 'pages/common/mine/mine': true };

// #ifdef MP
const rect = wx.getMenuButtonBoundingClientRect();
const navPos = {
  top: rect.top + 'px',
  height: rect.height + 'px'
};
// #endif
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    },
    white:{
      type:Boolean,
      default:false
    },
    showReturn: {
      type: Boolean,
      default: true
    },
    theme: {
      type: String, //['light','primary']
      default: 'light'
    },
    withShadow: {
      type: Boolean,
      default: false
    },
    isChooseCity:{
      type: Boolean,
      default: false
    },
    isBackHome:{
      type: Boolean,
      default: false
    },
    returnUrl:{
      type: String,
      default:''
    }
  },
  data() {
    return {
      navPos: { top: 0, height: '88rpx' },
      containerClass: 'null',
      _showReturn: true,
      cityArray:['广州','佛山','汕头'],
      index:0,
      imageUrlone:this.imageUrl
    };
  },

  computed: {
    getReturnImgSrc() {
      const theme = this.theme == 'primary' ? 'light' : 'primary';
      return `${this.imageUrlone}/nav/return-${theme}.svg`;
    },
    getNavClasses() {
      const { withShadow, theme,white } = this;
      const res = [`theme-${theme}`];
      withShadow && res.push('withShadow');
      white&&res.push('y-bg-white')
      return res;
    },
    getPageClasses() {
      const { white ,containerClass} = this;
      const res = ['part-scroll', 'y-flex', containerClass];
      white&&res.push('y-bg-white')
      return res;
    },
  },
  created() {
	  
    this._showReturn = this.initRetBtnState();
    const currentPage = getCurrentPages().pop().route;
    if (tabBarPages[currentPage]) {
      console.log('设置class');
      this.containerClass = 'part-scroll-h5';
    }

    this.navPos = navPos;
  },
  watch:{
	  showReturn(){
		this._showReturn=this.initRetBtnState()  
		this.$forceUpdate()
	  }
  },
  methods: {
    navBack() {
		let that = this;
		if(that.returnUrl){
			uni.redirectTo({
			  url: that.returnUrl,
			  fail(e) {
			    // if(e.errMsg == 'redirectTo:fail:can not redirect to a tabbar page' || e.errMsg == 'redirectTo:fail can not redirectTo a tabbar page'){
			    //   uni.reLaunch({
			    //     url:that.returnUrl
			    //   })
			    // }
          uni.reLaunch({
            url:that.returnUrl
          })
			  }
			});
		}else{
			uni.navigateBack();
		}
      
    },
	backHome(){
		uni.switchTab({
		    url: '/pages/common/home/home'
		});
	},
    initRetBtnState() {
      if (!this.showReturn) return false;
      return getCurrentPages().length > 1;
    },
    chooseCity(e){
		this.index = e.detail.value;
		this.$emit('handleCity',this.cityArray[e.target.value])
    }
  }
};
</script>

<style lang="scss">
.part-scroll {
  flex-direction: column;
  width: 100%;
  height: 100vh;
  align-items: stretch;
  overflow: hidden;
}
/* #ifdef H5 */
.part-scroll-h5 {
  height: calc(100vh - 50px);
}
/* #endif */
.home{
	.iconfont{
		font-size: 40rpx ;
	}
}
.nav {
  padding: 0 (($spacing-col)-2);
  /* #ifdef MP */
  padding-bottom: $spacing-row;
  /* #endif */
  // margin-top: var(--status-bar-height);
  display: flex;
  justify-content: space-around;
  align-items: center;
  // width: 750rpx;
  font-size: $font-size1;
  z-index: 1;
  position: relative;
}
.chooseCity{
	font-size: 30rpx;
	font-weight: 400;
	.choose{
		text{
			margin-left: 10rpx;
		}
	}
}

.theme-primary {
  background-color: $color-primary;
  color: #ffffff;
  box-shadow: 0 0 0 1px $color-primary;
}
.theme-regularMember{
  background-color: #FFDFDB;
  color: #00000A ;
}
.theme-goldMember{
  background-color: #FFF9EC;
  color: #00000A ;
}
.theme-platinumMember{
  background-color: #E9F4FF;
  color: #00000A ;
}


.theme-light {
  background-color: #ffffff;
  color: #303232;
}
.theme-F9F9F9 {
  background-color: #F9F9F9;
  color: #303232;
}
.return,
.toFixed {
  width: 34rpx;
  height: 34rpx;
  &.hidden {
    display: none;
  }
}
.nav-title {
  text-align: center;
  flex: 1;
  &.isChooseCity{
	  margin-right: 48px;
  }
  &.isBackHome{
	  margin-right: 20px;
  }
}

.withShadow {
  box-shadow: 0px 3px 8px 0px rgba(237, 239, 242, 0.41);
}
</style>
